<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐上传</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/upload-music.css">
    <script src="/js/jquery-3.7.1.min.js"></script>
    <link rel="icon" type="image/x-icon" href="./images/logo.webp">
</head>

<body>
    <div class="auth-container">
        <div class="app-title">音乐播放器</div>
        <div class="logo-container">
            <div class="music-logo"></div>
        </div>

        <form class="upload-form" id="uploadForm">
            <div class="form-group">
                <div class="file-input-container">
                    <label class="file-input-label">
                        选择音乐文件
                        <input type="file" name="file" class="file-input" accept="audio/*" onchange="updateFileName(this)">
                    </label>
                    <div class="file-name" id="fileName"></div>
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">歌手名</label>
                <input type="text" name="singer" class="form-input" placeholder="请输入歌手名" required>
            </div>

            <button type="submit" class="submit-btn">上传音乐</button>
        </form>
    </div>

    <script>
        function updateFileName(input) {
            const fileName = input.files[0]?.name || '未选择文件';
            document.getElementById('fileName').textContent = fileName;
        }

        $(document).ready(function() {
            $('#uploadForm').on('submit', function(e) {
                e.preventDefault();
                
                const formData = new FormData(this);
                const $submitBtn = $('.submit-btn');
                
                // 禁用提交按钮，防止重复提交
                $submitBtn.prop('disabled', true).text('上传中...');
                
                $.ajax({
                    url: '/music/upload',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(result) {
                        if (result.data) {
                            alert('上传成功！');
                            window.location.href = 'music.html';
                        } else {
                            alert('上传失败：' + result.message);
                            $submitBtn.prop('disabled', false).text('上传音乐');
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status == 401) {
                            alert('用户未登录');
                            location.href = './login.html';
                            return;
                        } else {
                            alert('HTTP请求失败,状态码为: '+xhr.status);
                        }
                        $submitBtn.prop('disabled', false).text('上传音乐');
                    }
                });
            });
        });
    </script>
</body>

</html>